import React, { useState } from 'react';
import './index.less';
import { Button, Tooltip } from 'antd';
import {
  HomeOutlined,
  LoadingOutlined,
  SettingFilled,
  SmileOutlined,
  SyncOutlined,
  WalletOutlined,
} from '@ant-design/icons';
import { history } from 'umi';
export default function index() {
  let [person, setPerson] = useState([
    {
      name: '加班申请',
      onclick: '/applyOvertime',
      data: 140,
      icon: (
        <WalletOutlined style={{ marginLeft: '7px', marginRight: '7px' }} />
      ),
    },
    {
      name: '出差申请',
      onclick: '/applyEvection',
      data: 141,
      icon: (
        <WalletOutlined style={{ marginLeft: '7px', marginRight: '7px' }} />
      ),
    },
    {
      name: '员工需求计划',
      onclick: '/employeeNeeds',
      data: 157,
      icon: (
        <WalletOutlined style={{ marginLeft: '7px', marginRight: '7px' }} />
      ),
    },
    {
      name: '考勤异常申请',
      onclick: '/applyAttendance',
      data: 163,
      icon: (
        <WalletOutlined style={{ marginLeft: '7px', marginRight: '7px' }} />
      ),
    },
    {
      name: '转正申请',
      onclick: '/regular',
      data: 144,
      icon: (
        <WalletOutlined style={{ marginLeft: '7px', marginRight: '7px' }} />
      ),
    },
    {
      name: '调薪申请',
      onclick: '/salary',
      data: 171,
      icon: (
        <WalletOutlined style={{ marginLeft: '7px', marginRight: '7px' }} />
      ),
    },
    {
      name: '销假申请',
      onclick: '/applyCancellation',
      data: 175,
      icon: (
        <WalletOutlined style={{ marginLeft: '7px', marginRight: '7px' }} />
      ),
    },
    {
      name: '请假申请',
      onclick: '/applyLeave',
      data: 203,
      icon: (
        <WalletOutlined style={{ marginLeft: '7px', marginRight: '7px' }} />
      ),
    },
    {
      name: '奖惩申请',
      onclick: '/punishment',
      data: 204,
      icon: (
        <WalletOutlined style={{ marginLeft: '7px', marginRight: '7px' }} />
      ),
    },
    {
      name: '离职申请',
      onclick: '/quit',
      data: 205,
      icon: (
        <WalletOutlined style={{ marginLeft: '7px', marginRight: '7px' }} />
      ),
    },
    {
      name: '人事调动申请',
      onclick: '/transfer',
      data: 206,
      icon: (
        <WalletOutlined style={{ marginLeft: '7px', marginRight: '7px' }} />
      ),
    },
  ]);
  let [administrative, setadministrative] = useState([
    {
      name: '新增会议',
      data: 216,
      onclick: '/addItem',
      icon: (
        <WalletOutlined style={{ marginLeft: '7px', marginRight: '7px' }} />
      ),
    },
    {
      name: '印章申请',
      data: 217,
      onclick: '/seal',
      icon: (
        <WalletOutlined style={{ marginLeft: '7px', marginRight: '7px' }} />
      ),
    },
  ]);

  let [finance, setfinance] = useState([
    {
      name: '费用申请',
      data: 209,
      onclick: '/cost',
      icon: (
        <WalletOutlined style={{ marginLeft: '7px', marginRight: '7px' }} />
      ),
    },
    {
      name: '费用报销',
      data: 210,
      onclick: '/uncost',
      icon: (
        <WalletOutlined style={{ marginLeft: '7px', marginRight: '7px' }} />
      ),
    },
  ]);

  let [property, setproperty] = useState([
    {
      name: '添加资产',
      onclick: '/assets',
      data: 213,
      icon: (
        <WalletOutlined style={{ marginLeft: '7px', marginRight: '7px' }} />
      ),
    },
  ]);

  let [administrator, setadministrator] = useState([
    {
      name: '初期开票',
      data: 211,
      onclick: '/invoicing',
      icon: (
        <WalletOutlined style={{ marginLeft: '7px', marginRight: '7px' }} />
      ),
    },
    {
      name: '初期收票',
      data: 212,
      onclick: '/receipt',
      icon: (
        <WalletOutlined style={{ marginLeft: '7px', marginRight: '7px' }} />
      ),
    },
  ]);

  return (
    <div className="start">
      <div className="personnel">
        <span className="personnel_span">人事类</span>
        <ul>
          {person.map((item, index) => {
            return (
              <Tooltip placement="bottomLeft" title={item.data}>
                <li
                  onClick={() => {
                    history.push({
                      pathname: `${item.onclick}`,
                      query: {
                        name: `${item.name}`,
                      },
                    });
                  }}
                >
                  {item.icon}
                  {item.name}
                </li>
              </Tooltip>
            );
          })}
        </ul>
      </div>

      {/* 行政类 */}
      <div className="personnel">
        <span className="personnel_span">行政类</span>
        <ul style={{ height: '38px' }}>
          {administrative.map((item, index) => {
            return (
              <Tooltip placement="bottomLeft" title={item.data}>
                <li
                  onClick={() => {
                    history.push({
                      pathname: `${item.onclick}`,
                      query: {
                        name: `${item.name}`,
                      },
                    });
                  }}
                >
                  {item.icon}
                  {item.name}
                </li>
              </Tooltip>
            );
          })}
        </ul>
      </div>

      {/* 财务类 */}
      <div className="personnel">
        <span className="personnel_span">财务类</span>
        <ul style={{ height: '38px' }}>
          {finance.map((item, index) => {
            return (
              <Tooltip placement="bottomLeft" title={item.data}>
                <li
                  onClick={() => {
                    history.push({
                      pathname: `${item.onclick}`,
                      query: {
                        name: `${item.name}`,
                      },
                    });
                  }}
                >
                  {item.icon}
                  {item.name}
                </li>
              </Tooltip>
            );
          })}
        </ul>
      </div>

      {/* 固定资产 */}
      <div className="personnel">
        <span className="personnel_span">固定资产</span>
        <ul style={{ height: '38px' }}>
          {property.map((item, index) => {
            return (
              <Tooltip placement="bottomLeft" title={item.data}>
                <li
                  onClick={() => {
                    history.push({
                      pathname: `${item.onclick}`,
                      query: {
                        name: `${item.name}`,
                      },
                    });
                  }}
                >
                  {item.icon}
                  {item.name}
                </li>
              </Tooltip>
            );
          })}
        </ul>
      </div>

      {/* 财务管理 */}
      <div className="personnel">
        <span className="personnel_span">财务管理</span>
        <ul style={{ height: '38px' }}>
          {administrator.map((item, index) => {
            return (
              <Tooltip placement="bottomLeft" title={item.data}>
                <li
                  onClick={() => {
                    history.push({
                      pathname: `${item.onclick}`,
                      query: {
                        name: `${item.name}`,
                      },
                    });
                  }}
                >
                  {item.icon}
                  {item.name}
                </li>
              </Tooltip>
            );
          })}
        </ul>
      </div>
    </div>
  );
}
